Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@jsonforms/react
Advanced tools
Complex forms in the blink of an eye
JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
This is the JSON Forms React package which provides the necessary bindings for React. It uses JSON Forms Core.
You can combine the react package with any react-based renderer set you want, for example the Material Renderers or the Vanilla Renderers.
See the official documentation and the JSON Forms React seed repository for examples on how to integrate JSON Forms with your application.
Check https://www.npmjs.com/search?q=%40jsonforms for all published JSON Forms packages.
Use the JsonForms
component to render a form for your data.
Mandatory props:
data: any
- the data to showrenderers: JsonFormsRendererRegistryEntry[]
- the React renderer set to useOptional props:
schema: JsonSchema
- the data schema for the given data. Will be generated when not given.uischema: UISchemaElement
- the UI schema for the given data schema. Will be generated when not given.cells: JsonFormsCellRendererRegistryEntry[]
- the React cell renderer set to useconfig: any
- form-wide options. May contain default ui schema options.readonly: boolean
- whether all controls shall be readonly.uischemas: JsonFormsUiSchemaEntry[]
- registry for dynamic ui schema dispatchingvalidationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'
- the validation mode for the formajv: AJV
- custom Ajv instance for the formrefParserOptions: RefParserOptions
- configuration for ref resolvingonChange
- callback which is called on each data change, containing the updated data and the validation result.Example:
import React, { useState } from 'react';
import {
materialRenderers,
materialCells
} from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';
const schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1
},
done: {
type: 'boolean'
},
due_date: {
type: 'string',
format: 'date'
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly']
}
},
required: ['name', 'due_date']
};
const uischema = {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: false,
scope: '#/properties/done'
},
{
type: 'Control',
scope: '#/properties/name'
},
{
type: 'HorizontalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/due_date'
},
{
type: 'Control',
scope: '#/properties/recurrence'
}
]
}
]
};
const data = {};
function App() {
const [data, setData] = useState(initialData);
return (
<JsonForms
schema={schema}
uischema={uischema}
data={data}
renderers={materialRenderers}
cells={materialCells}
onChange={({ data, _errors }) => setData(data)}
/>
);
}
The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.
Our current roadmap is available here.
JSON Forms is developed by EclipseSource.
If you encounter any problems feel free to open an issue on the repo. For questions and discussions please use the JSON Forms board. You can also reach us via email. In addition, EclipseSource also offers professional support for JSON Forms.
FAQs
React module of JSON Forms
The npm package @jsonforms/react receives a total of 28,369 weekly downloads. As such, @jsonforms/react popularity was classified as popular.
We found that @jsonforms/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.